<template>
  <a-spin :spinning="confirmLoading">
    <a-descriptions bordered>
      <a-descriptions-item label="开票单位" >{{formData.businessId_dictText}}</a-descriptions-item>
      <a-descriptions-item label="企业名称" >{{formData.businessName}}</a-descriptions-item>
      <a-descriptions-item label="纳税人识别号" >{{formData.businessTax}}</a-descriptions-item>
      <a-descriptions-item label="企业地址" :span="2">{{formData.businessAddress}}</a-descriptions-item>
      <a-descriptions-item label="企业电话">{{formData.businessPhone}}</a-descriptions-item>
      <a-descriptions-item label="开户行" :span="2">{{formData.businessBankName}}</a-descriptions-item>
      <a-descriptions-item label="银行账号" >{{formData.businessBankAccount}}</a-descriptions-item>
      <a-descriptions-item label="开票类目" >{{formData.categoryText}}</a-descriptions-item>
      <a-descriptions-item label="开票类型" >
        <a-badge v-if="formData.type==1" color="green" :text="formData.type_dictText" />
        <a-badge v-if="formData.type==2" color="red" :text="formData.type_dictText" />
      </a-descriptions-item>
      <a-descriptions-item label="开票金额" ><span style="font-size: 18px;color: red;">￥ {{parseFloat(formData.amount).toFixed(2)}}</span></a-descriptions-item>
      <a-descriptions-item label="备注信息" >{{formData.remark}}</a-descriptions-item>
      <a-descriptions-item label="收件类型" :span="2">
        <a-badge v-if="formData.receivedType==1" color="green" :text="formData.receivedType_dictText" />
        <span v-if="formData.receivedType==1 && formData.electronicInvoice">
          <a-button style="margin-left: 30px;" :ghost="true" type="primary" preIcon="ant-design:search-outlined"
                    size="small" @click="viewFile(formData.electronicInvoice)">预览</a-button>
          <a-button style="margin-left: 15px;" :ghost="true" type="primary" preIcon="ant-design:download-outlined"
                    size="small" @click="downloadFile(formData.electronicInvoice)">下载</a-button>
        </span>
        <a-badge v-if="formData.receivedType==2" color="red" :text="formData.receivedType_dictText" />
        <span v-if="formData.receivedType==2 && formData.billImg" style="margin-left: 20px;">
          <PreviewGroup>
            <template v-for="(img, index) in formData.billImg.split(',')" :key="index">
              <Image :width="80" :height="80" style="padding-left: 10px;" :src="useGlobSetting().filePreviewUrl + img"/>
            </template>
          </PreviewGroup>
        </span>
      </a-descriptions-item>
      <a-descriptions-item label="收件信息" :span="3" v-if="formData.receivedType==2">
        {{formData.receivedAddress}} &nbsp;&nbsp;&nbsp;&nbsp;{{formData.receivedName}} &nbsp;&nbsp;{{formData.receivedPhone}}
      </a-descriptions-item>
    </a-descriptions>
  </a-spin>
</template>

<script lang="ts" setup>
import { defineExpose, defineProps, nextTick, reactive, ref } from "vue";
import { useMessage } from "/@/hooks/web/useMessage";
import { downloadFile, viewFile } from "/@/utils/common/renderUtils";
import { Form, Image } from "ant-design-vue";
import { useGlobSetting } from "/@/hooks/setting";

const props = defineProps({
  formData: { type: Object, default: ()=>{} },
});
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
  id: '',
  companyId: '',
  businessId: '',
  orderNo: '',
  businessName: '',
  businessPhone: '',
  businessTax: '',
  businessAddress: '',
  businessBankName: '',
  businessBankAccount: '',
  category: '',
  categoryId: '',
  categoryText: '',
  amount: undefined,
  type: 1,
  remark: '',
  receivedType: 1,
  receivedName: '',
  receivedPhone: '',
  receivedAddress: '',
  checkTime: '',
  rejectReason: '',
  electronicInvoice: '',
  billImg: '',
  finishTime: '',
  status: undefined,
});
const { createMessage } = useMessage();
const confirmLoading = ref<boolean>(false);
const { resetFields } = useForm(formData, { immediate: true });

/**
 * 打卡弹框
 */
function edit(record) {
  nextTick(() => {
    resetFields();
    //赋值
    Object.assign(formData, record);
  });
}

defineExpose({
  edit,
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  overflow-y: auto;
  padding: 24px 24px 24px 24px;
}
</style>
